<template>
  <div class="page-wrap">
    <div class="page-title">CdsSliderNum</div>
    <div class="page-sub-title">基本用法</div>
    <codeShow :code="code1">
      <CdsSliderNum
        v-model="num"
        :marks="marks"
        show-input
        :show-stops="false"
        :show-tooltip="false"
      >
        <template #unit> <span style="margin-left: 5px"> 个</span> </template>
      </CdsSliderNum>
    </codeShow>
    <div class="page-sub-title">CdsSliderNum API</div>
    <el-table :data="tableData" style="margin-top: 20px; margin-bottom: 48px">
      <el-table-column
        label="属性名"
        align="left"
        width="150"
        prop="attr"
      ></el-table-column>
      <el-table-column
        label="说明"
        align="left"
        prop="illustrate"
      ></el-table-column>
      <el-table-column
        label="类型"
        align="left"
        width="150"
        prop="type"
      ></el-table-column>
      <el-table-column
        label="默认值"
        align="left"
        width="150"
        prop="default"
      ></el-table-column>
    </el-table>
    <div class="page-sub-title">CdsSliderNum slot</div>
    <div>unit 输入框后面的单位</div>
  </div>
</template>

<script setup>
import codeShow from '../../components/code.vue'
import CdsSliderNum from '../../../../packages/businessComponents/cdsSliderNum/src/cdsSliderNum.vue'
import { onMounted, ref } from 'vue';
const num = ref(64);
const marks = ref({
  0: '0',
  1: '4',
  2: '8',
  3: '16',
  4: '32',
  5: '64',
  6: '128',
  7: '256',
});
const tableData = ref([
  {
    'attr': 'v-model', 'illustrate': '数量', 'type': 'Number', 'default': 0
  },
  {
    'attr': 'marks', 'illustrate': '滑块上显示的label和对应value', 'type': 'Object', 'default': 'null'
  },
  {
    'attr': 'show-input', 'illustrate': '是否显示输入框', 'type': 'Boolean', 'default': 'false'
  },
  {
    'attr': 'show-tooltip', 'illustrate': '是否显示提示信息', 'type': 'Boolean', 'default': 'true'
  },
])
const code1 = `
//template
  <CdsSliderNum
        v-model="num"
        :marks="marks"
        show-input
        :show-tooltip="false"
      >
        <template #unit> <span style="margin-left: 5px"> 个</span> </template>
      </CdsSliderNum>
      
//script
import { CdsSliderNum } from 'cds-ui-business-components'   
const num = ref(0);
const marks = ref({
  0: '0',
  1: '4',
  2: '8',
  3: '16',
  4: '32',
  5: '64',
  6: '128',
  7: '256',
}); 
`;
</script>

<style lang="scss" scoped>
</style>